import { useSelector, useDispatch } from "react-redux";
import {
  decrement,
  increment,
  incrementByAmount,
  emptyCount,
} from "@/store/features/couterSlice";
import { Button, Input } from "antd";
import useDebounce from "@/hooks/useDebounce";
import { useState, useEffect } from "react";
import useThrottle from "@/hooks/useThrottle";
import useCounter from "@/hooks/useCounter";

function DefaultPage() {
  const count = useSelector((state: any) => state?.counter.value);
  const userInfo = useSelector((state: any) => state?.user);
  const dispatch = useDispatch();
  const [inputValue, setInputValue] = useState("");
  const { counter, addNum, reduceNum } = useCounter(0);

  const handleClickTest = useThrottle(() => {
    console.log("测试节流点击");
  }, 4000);

  // 防抖处理搜索函数（500ms 延迟）
  const handleSearch = useDebounce((keyword: string) => {
    console.log("搜索关键词:", keyword);
    // 这里可以发起 API 请求
  }, 500);

  const changeInputValue = (e: any) => {
    setInputValue(e.target.value);
    handleSearch(e.target.value);
  };

  return (
    <>
      <div>
        <div>
          <Button
            className="mr-4"
            onClick={() => dispatch(emptyCount(0))}
            type="primary"
          >
            清零
          </Button>
          <Button type="primary" onClick={() => dispatch(increment())}>
            increment增加
          </Button>
          <div className="mt-2 mb-2">{count}</div>
          <Button
            type="primary"
            className="mr-4"
            onClick={() => dispatch(decrement())}
          >
            Decrement减少
          </Button>
          <Button
            type="primary"
            onClick={() => dispatch(incrementByAmount(count > 0 ? count : 1))}
          >
            增加指定值
          </Button>
          <div className="mb-4 outline-dotted-red-600">
            {userInfo?.username ?? "默认"}
          </div>
          <Input value={inputValue} onChange={(e) => changeInputValue(e)} />
          <div className="mb-4 mt-4">
            <Button type="primary" onClick={() => handleClickTest()}>
              测试节流点击
            </Button>
          </div>
          <div className="mb-4">
            <Button type="primary" className="mr-4"  onClick={() => addNum()}>
              测试节流点击
            </Button>
            <span>{counter}</span>
            <Button type="primary" className="ml-4" onClick={() => reduceNum()}>
              测试节流点击
            </Button>
          </div>
        </div>
      </div>
    </>
  );
}

export default DefaultPage;
